<template>
<!--  <div id="phone_brand">-->
<!--    <div>-->
<!--      <h2>Apple</h2>-->
<!--    </div>-->
<!--    <div>-->
<!--      <h2>小米</h2>-->
<!--    </div>-->
<!--    <div>-->
<!--      <h2>华为</h2>-->
<!--    </div>-->
<!--  </div>-->
  <el-container>
    <el-main>
<!--      <div>-->
<!--        <h1 id="phone_brand">Apple</h1>-->
<!--        <el-row :gutter="20" type="flex">-->
<!--          <el-col>-->
<!--            <el-card id="phone_type" shadow="hover">-->
<!--              <h3>iPhone13 Pro Max</h3><br>-->
<!--              <el-image :src="require('@/assets/apple/iphone13pro.jpeg')" fit="fill"></el-image><br>-->
<!--              <div class="button">-->
<!--                <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' title="加入购物车？" @confirm="addToCart">-->
<!--                  <el-button icon="el-icon-shopping-bag-2" type="primary" slot="reference">加入购物车</el-button>-->
<!--                </el-popconfirm>-->
<!--                <el-popover placement="right" trigger="hover" width="">-->
<!--                  <el-row>-->
<!--                    <el-col>尺寸：英寸</el-col>-->
<!--                    <el-col>处理器：</el-col>-->
<!--                    <el-col>硬盘：G起</el-col>-->
<!--                    <el-col>屏幕像素：</el-col>-->
<!--                    <el-col>重量：g</el-col>-->
<!--                    <el-col>电池容量：最长可达小时</el-col>-->
<!--                  </el-row>-->
<!--                  <el-button icon="el-icon-more" type="info" slot="reference">查看信息</el-button>-->
<!--                </el-popover>-->
<!--              </div>-->
<!--            </el-card>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--      </div>-->

<!--      这里需要动态地从数据库获取信息-->
      <div v-for="(brand,index) in phone" :key="index">
        <h1 id="phone_brand">{{brand.brand_name}}</h1>
        <el-row :gutter="20">
          <el-col v-for="(types,aindex) in phone[index].types" :key="aindex" :span=6>
            <el-card id="phone_type" shadow="hover">
              <h3>{{types.type_name}}</h3><br>
              <el-image :src="require('@/'+types.src)" fit="fill"></el-image><br>
              <div class="button">
                <el-popconfirm confirm-button-text='好的' cancel-button-text='不用了' title="加入购物车？" @confirm="addToCart">
                  <el-button icon="el-icon-shopping-bag-2" type="primary" slot="reference">加入购物车</el-button>
                </el-popconfirm>
                <el-popover placement="bottom" trigger="hover" width="300">

                  <el-descriptions size="medium" direction="vertical">
                    <el-descriptions-item label="尺寸">{{types.info.size}}英寸</el-descriptions-item>
                    <el-descriptions-item label="处理器">{{types.info.soc}}</el-descriptions-item>
                    <el-descriptions-item label="硬盘">{{types.info.disk}}G起</el-descriptions-item>
                    <el-descriptions-item label="屏幕像素">{{types.info.pixel}}</el-descriptions-item>
                    <el-descriptions-item label="重量">{{types.info.weight}}g</el-descriptions-item>
                    <el-descriptions-item label="电池容量">最长可达{{types.info.battery}}小时</el-descriptions-item>
                  </el-descriptions>

                  <el-button icon="el-icon-more" type="info" slot="reference">查看信息</el-button>
                </el-popover>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "Phone_menu",
  data() {
    return {
      phone: [
        {
          brand_name: 'Apple',
          types: [
            {
              type_name: 'iPhone13 Pro Max',
              src: 'assets/apple/iphone13pro.jpeg',
              info: {
                size: '6.7',
                soc: 'A15',
                disk: '128',
                pixel: '1920*1080',
                weight: '250',
                battery: '75',
              }
            },
            {
              type_name: 'iPhone13 Pro',
              src: 'assets/apple/iphone13pro.jpeg',
              info: {
                size: '',
                soc: '',
                disk: '',
                pixel: '',
                weight: '',
                battery: '',
              }
            },
            {
              type_name: 'iPhone13',
              src: 'assets/apple/iphone13pro.jpeg',
              info: {
                size: '',
                soc: '',
                disk: '',
                pixel: '',
                weight: '',
                battery: '',
              }
            },
            {
              type_name: 'iPhone13 mini',
              src: 'assets/apple/iphone13pro.jpeg',
              info: {
                size: '',
                soc: '',
                disk: '',
                pixel: '',
                weight: '',
                battery: '',
              }
            },
            {
              type_name: 'iPhone13 mini',
              src: 'assets/apple/iphone13pro.jpeg',
              info: {
                size: '',
                soc: '',
                disk: '',
                pixel: '',
                weight: '',
                battery: '',
              }
            },
          ]
        },
        {
          brand_name: '华为',
          types: [
            {
              type_name: 'mate',
              src: 'assets/apple/iphone13pro.jpeg',
              info: {
                size: '',
                soc: '',
                disk: '',
                pixel: '',
                weight: '',
                battery: '',
              }
            }
          ]
        }
      ]
    }
  },
  methods: {
    addToCart() {
      if(this.$store.state.isLogin) {
        this.$message.success('添加成功');
        //往下继续写此方法将商品加入数据库


      } else {
        this.$message.warning('请先登录');
      }
    }
  }
}
</script>

<style scoped>
el-header {
  text-align: left;
}
h3 {
  margin: 0;
  padding: 0;
  font-size: 22px;
}
#phone_brand {
  font-family: "Helvetica Neue",serif;
  font-size: 35px;
  line-height: 60px;
  padding: 0;
  margin-bottom: 20px;
}
#phone_type {
  text-align: left;
  font-family: "Helvetica Neue",serif;
  border-radius: 15px;
  margin-bottom: 25px;
}
.button {
  text-align: center;
  margin-top: 20px;
}
el-row::-webkit-scrollbar {
  display: none;
}
*::-webkit-scrollbar {
  display: none;
}
</style>
